<template>
	<view class="">
		<!-- #ifdef APP-PLUS -->
		<view class="u-h-88">
			
		</view>
		<!-- #endif -->
		<!-- 头部商品图片信息 -->
		<view class="u-rela">
			<view>
				<!-- 商品图片 -->
				<u-swiper @change='change' :list="imgList" :circular='false' :autoplay='false' height="883" mode="round"
					indicator-pos="" img-mode="aspectFill">
				</u-swiper>
			</view>
			<view class="u-w-750 u-t-20 u-b-r-50 u-abso u-flex u-row-between u-p-20 u-t-20 ">
				<!-- 返回按钮 -->
				<view @click="backs" class="bs_CCCCCC bg_FFFFFF u-w-70 u-h-70 u-b-r-70 u-flex u-col-center u-row-center">
					<u-icon name='arrow-left' size='40' color='#333333'></u-icon>
				</view>
				<view class="u-w-500">
					<u-notice-bar type="" bg-color="" font-size="30" speed="80" mode="horizontal" :list="noticeList"></u-notice-bar>
				</view>
				<view @click="shareOn" class="bs_CCCCCC bg_FFFFFF u-w-70 u-h-70 u-b-r-70 u-flex u-col-center u-row-center">
					<u-icon name='zhuanfa' size='40' color='#333333'></u-icon>
				</view>
			</view>
			<!-- 下标 -->
			<view class="u-abso u-b-10 bgt_000000 cl_FFF u-r-20 u-w-100 u-text-center u-b-r-20"
				style=" border:1px solid #E7E7E7 ;">
				<text>{{imgnum}}/{{allnum}}</text>
			</view>
		</view>
		<!-- 商品价格信息 -->
		<view class="u-p-30">
			<view class=" u-w-700 bg_FFFFFF u-b-r-26">
				<view v-if="userinfo && userinfo.data" class="u-p-20  u-weight">{{userinfo.data.name}}</view>
				<view class="u-p-20 u-flex u-row-between">
					<view class=" u-flex">
						<!-- <u-image src="https://www.sqkjkj.vip/wxImg/common/shop/money.png" mode="aspectFill" width="32rpx"height='32rpx'></u-image> -->
						<view class="u-font-46" style="color: #FF5502FF;">￥{{data.to_pay_price}}</view>
						<text class="u-font-30">+</text>
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/money.png" mode="aspectFill" width="32rpx"
							height='32rpx'></u-image>
						<view class="u-font-46" style="color: #FF5502FF;">{{data.to_pay_score}}</view>
					</view>
					<view class=" u-font-20">
						已兑换<text style="color:#FC3533FF ;">{{data.sale}}</text>件
					</view>
				</view>
				<view v-if="userinfo && userinfo.data"  class="u-flex">
					<!-- <view class="u-p-20 u-flex u-font-24">
						<view class="u-p-10 bg_FF5502FF  cl_FFF u-b-r-10">购买得{{userinfo.data.bonus_points || 0}}积分</view>
					</view> -->
					<view class="u-p-20 u-flex u-font-24">
						<view class="u-p-10 bg_FF5502FF  cl_FFF u-b-r-10">直推奖励{{userinfo.data.zt_reward || 0}}%</view>
					</view>
					<view class="u-p-20 u-flex u-font-24">
						<view class="u-p-10 bg_FF5502FF  cl_FFF u-b-r-10">间推奖励{{userinfo.data.jt_reward || 0}}%</view>
					</view>
				</view>
			</view>
			
			<view class="u-m-t-20 u-w-700 u-p-20 bg_FFFFFF u-b-r-26">
				<view class="u-weight">
					商品详情
				</view>
				<view class="" v-if="userinfo && userinfo.data && userinfo.data.dynamic_param">
					<view  class="u-m-t-20 u-flex u-font-28" v-for="(item,index) in userinfo.data.dynamic_param" :key="index">
						<view class="">
							{{item.param_name}}:
						</view>
						<view class="">
							{{item.param_value}}
						</view>
					</view>
				</view>
				<view class="u-m-t-20" v-if="userinfo && userinfo.data && userinfo.data.detail">
					<view class="">
						文字说明：<u-parse :html="userinfo.data.detail"></u-parse>
					</view>
				</view>
				<view class="" v-if="userinfo && userinfo.data && userinfo.data.detail_img">
					<view class="u-m-t-20 u-font-28 u-flex-col u-col-center" v-for="(item,index1) in userinfo.data.detail_img" :key="index1">
						<image style="width: 700rpx;" :src="item" border-radius="10" mode="widthFix"></image>
					</view>
				</view>
				<view class="">
					
				</view>
			</view>
			<view v-if="userinfo && userinfo.data && userinfo.data.price_description" class="u-m-t-20 u-w-700 u-p-20 bg_FFFFFF u-b-r-26">
				<view class="u-weight">
					价格说明
				</view>
				<view class="u-m-t-20">
					<u-parse :html="userinfo.data.price_description"></u-parse>
				</view>
			</view>
		</view>
		
		<!-- 店铺 -->
		<view class="u-p-30 ">
			<view class=" u-w-700 bg_FFFFFF u-b-r-26">
				<view  @click="$u.route('/pages/shopmassage/shopmassage?num='+shop.id)" class="u-p-20 u-flex u-row-between">
					<view class=" u-flex">
						<u-image v-if="shop && shop.logo" :src="shop.logo.url" mode="aspectFill" width="110rpx" height='110rpx'></u-image>
						<view class="u-p-10">
							<view class="u-flex">
								<view class="u-weight u-font-30 u-m-l-10" @click.stop="show=true">{{shop.name}}</view>
							</view>
							<view class="u-font-26 u-p-10">共<text class="cl_FB473CFF">{{shop.shop_sales}}</text>销量</view>
						</view>
					</view>
					<view class="u-font-20" style="color: #FB473CFF;">
						进入店铺 <u-icon name='arrow-right' color='#FB473CFF'></u-icon>
					</view>
				</view>

			</view>
		</view>
		<view class="u-p-l-30 u-p-r-30">
			<view class="u-w-700 bg_FFFFFF u-b-r-26">
			<view class="u-p-20  u-flex">
				<view @click="$com.makePhoneCall(shop.mobile)" class="u-flex">
					<u-image src="https://www.sqkjkj.vip/wxImg/clear/img2.png" mode="aspectFill" width="28rpx" height='28rpx'>
					</u-image>
					<view  class="u-m-l-10 u-font-26"><text class="cl_898989FF">电话:</text>{{shop.mobile}}
					</view>
				</view>
			
				<view @click="$com.setClipboardData(shop.wechat)"  class="u-flex u-m-l-20">
					<u-image src="https://www.sqkjkj.vip/wxImg/clear/wx.png" mode="aspectFill" width="28rpx" height='28rpx'>
					</u-image>
					<view  class="u-m-l-10 u-font-26 u-m-r-20"><text
							class="cl_898989FF">微信:</text>{{shop.wechat}}
					</view>
					<u-image src="https://www.sqkjkj.vip/wxImg/clear/img3.png" mode="aspectFill" width="28rpx" height='28rpx'>
					</u-image>
				</view>
			</view>
			<view @click="openLocation"  class="u-flex u-m-t-10 u-p-10">
				<u-image src="https://www.sqkjkj.vip/wxImg/clear/img4.png" mode="aspectFill" width="28rpx" height='28rpx'></u-image>
				<view class="u-m-l-10 u-font-26 u-m-r-20"><text
						class="cl_898989FF">地址:</text>{{shop.area+shop.address}}</view>
			</view>
			</view>
		</view>
		<view class="u-h-170">
			
		</view>
		<!-- 底部信息 -->
		<view class="u-fix u-b-0 u-z-300 bg_FFFFFF bg_FFFFFF u-p-20">
			<view class="u-flex">
				<view class=" u-flex-col u-col-center u-w-100">
					<!-- <u-icon name='bag-fill' size='40'></u-icon> -->
					<u-image src='https://www.sqkjkj.vip/wxImg/common/shop/shop.png' mode="aspectFill" width="36rpx" height='36rpx'>
					</u-image>
					<view class="">进店</view>
				</view>
				<view class="u-flex-col u-col-center u-w-100" @click="lickClick">
					<u-icon name='heart' size='40' v-if="licks==0" ></u-icon>
					<u-icon name='heart-fill' size='40' color='red' v-else></u-icon>
					<view class="">收藏</view>
				</view>

				<view class="u-w-500 u-b-r-14 u-h-100 u-l-h-100 u-font-30 bg_FF5502FF u-text-center cl_FFF"
					@click="show=true">立即兑换</view>
			</view>
		</view>

		<!-- 分享弹窗 -->
		<uni-popup ref="sharepopup" type="bottom">
			<share-btn :sharedataTemp="sharedata"></share-btn>
		</uni-popup>

		<!-- 选择规格 -->
		<u-popup v-model="show" mode='bottom'>
			<view class="u-p-20">
				<view class="u-flex u-row-between u-col-top">
					<view class="u-flex ">
						<u-image :src='data.thumb' mode="aspectFill" width="150rpx" height='150rpx'>
						</u-image>
						<view class=" u-p-20">
							<view class="u-weight">{{data.name}}</view>
							<view class=" u-flex ">
								<view class="u-font-46" style="color: #FF5502FF;">{{data.to_pay_price}}+</view>
								<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/money.png" mode="aspectFill" width="32rpx"
									height='32rpx'></u-image>
								<view class="u-font-46" style="color: #FF5502FF;">{{data.to_pay_score}}</view>
							</view>
						</view>
					</view>
					<view class="">
						<u-image @click='show=false' src='https://www.sqkjkj.vip/wxImg/common/shop/close.png' mode="aspectFill"
							width="44rpx" height='44rpx'></u-image>
					</view>

				</view>

				<view class="u-m-t-30 u-p-b-20 u-font-26" style="border-bottom: 1rpx solid #cccccc;">
					<view class="u-m-t-20" v-for='(item,index3) in all_checked' :key="index3">
						<view class="">{{item.title}}</view>
						<u-row gutter="16">

							<u-col span="4" v-for="(items,index4) in item.spece_value_list" :key="index4">
								<view @click="shoes_guige(items,index4)"
									class="bg_EFEFEFFF u-w-146 u-h-52 u-l-h-52 cl_898989FF u-text-center u-m-t-10  u-b-r-16"
									:class="items.is_check==true?' cl_FF5502FF':''">{{items.title}}</view>
							</u-col>
						</u-row>
					</view>

				</view>

				<view class="u-m-t-30 u-p-b-20 u-flex u-row-between">
					<view class="">数量</view>
					<view class="">
						<uni-number-box v-model="value" ></uni-number-box>
					</view>
				</view>

				<!-- <view class="u-w-700 u-m-t-50 u-b-r-14 u-h-100 u-l-h-100 u-font-30 bg_FF5502FF u-text-center cl_FFF"
					@click="$u.route('/pages/home/truechange')">立即兑换</view> -->
				<view class="u-w-700 u-m-t-50 u-b-r-14 u-h-100 u-l-h-100 u-font-30 bg_FF5502FF u-text-center cl_FFF"
					@click="true_pay">立即兑换</view>
			</view>

		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import shareBtn from '@/components/share-btn/share-btn.vue';
	import {
		URL
	} from '@/config/config.js'
	export default {
		components: {
			uniPopup,
			shareBtn
		},
		data() {
			return {
				noticeList:[],
				// 商品厚度
				num: '厚',
				// 商品柔软度
				num1: '适中',
				// 点击收藏
				lick: 0,
				// 选择规格
				show: false,
				// 被选中的规格
				nums: 1,
				// 选择兑换数量
				value: 1,
				// 商品图片
				imgList: [],
				// 切换图片的下标
				imgnum: 1,
				// 图片总数
				allnum: '',
				// 分享传递的参数
				sharedata: {
					type: 1,
					strShareUrl: "http://www.baidu.com",
					strShareTitle: "分享标题",
					strShareSummary: "分享总结",
					strShareImageUrl: "http://www.xuelejia.com/xljapp/h5/static/aboutUsLogo.png"
				},
				all_checked: [],
				userinfo: '',
				data: '',
				shop: '',
				guige: [],
				shop_log: '',
				regcode:'',
				licks: '',
			}
		},

		onLoad(obj) {
			if(obj.regcode){
				uni.setStorageSync('zcRegcode',obj.regcode)
				uni.setStorageSync('regcode',obj.regcode)
			}
			this.allnum = this.imgList.length
			this.massage(obj.num)
		},
		onShow() {
			if(uni.getStorageSync('isUrl')==1){
				uni.setStorageSync('isUrl','2')
			}
			this.regcode=uni.getStorageSync('userinfo').regcode
		},
		onShareAppMessage() {
			return {
				title: this.userinfo.data.name,
				imageUrl: this.imgList[0].image,
				path: `/pages/home/shopmassage?num=${this.userinfo.data.spu}&regcode=${this.regcode}`
			}
		},
		onShareTimeline() {
			return {
				title: this.userinfo.data.name,
				imageUrl: this.imgList[0].image,
				path: `/pages/home/shopmassage?num=${this.userinfo.data.spu}&regcode=${this.regcode}`
			}
		},
		// 监听规格数据的变化
		watch: {
			"all_checked": {
				handler(newval, oldval) {
					console.log(newval);
					this.guige = []
					for (var i = 0; i < newval.length; i++) {
						let arr = newval[i].spece_value_list
						for (let j = 0; j < arr.length; j++) {
							if (arr[j].is_check == true) {
								this.guige.push(arr[j].id)
								let newArr= this.userinfo.data.sku_list.filter((res,index)=>{
									return this.guige.toString()==res.spece_value_id
								})
								if(newArr.length>0){
									this.data=newArr[0]
									this.price_one=((this.data.price) / 2).toFixed(2)
								}
								console.log(this.data)
							}
						}
					}

				},
				deep: true
			}
		},

		methods: {
			notice_list(){
				this.noticeList=[]
				this.$api.notice_list({
					shop_id: this.userinfo.data.skuInfo.shop_id
				}, res => {
					if(res.data.code==1){
						res.data.data.forEach(d=>{
							this.noticeList.push(d.content)
						})
					}
				})
			},
			// 获取商品信息
			massage(obj) {
				this.$api.shop_list_massage({
					spu: obj,
					regcode:uni.getStorageSync('regcode')
				}, res => {
					this.userinfo = res.data.data
					this.data = this.userinfo.data.skuInfo
					this.shop = this.userinfo.shop
					this.allnum = this.userinfo.data.imgs.length
					this.all_checked = this.userinfo.data.spece_list
					this.shop_log = this.shop.logo.url
					this.licks=this.userinfo.data.collection
					for (var i = 0; i < this.userinfo.data.imgs.length; i++) {
						let arr = {
							image: '',
							title: ''
						}
						arr.image = this.userinfo.data.imgs[i].url
						this.imgList.push(arr)
					}
					this.notice_list()
				})
			},
			// 点击选择规格
			shoes_guige(items, index) {
				for (var i = 0; i < this.all_checked.length; i++) {
					let arr = this.all_checked[i].spece_value_list
					if (items.spece_id == this.all_checked[i].id) {
						for (var j = 0; j < this.all_checked[i].spece_value_list.length; j++) {
							this.all_checked[i].spece_value_list[j].is_check = false
						}
						this.all_checked[i].spece_value_list[index].is_check = true
					}
				}
			},
			// 切换图片
			change(index) {
				this.imgnum = index + 1
			},
			// 改变兑换数量
			valChange(e) {
				console.log('当前值为: ' + e.value)
				this.value = e.value
			},
			// 点击返回
			backs() {
				uni.navigateBack()
			},
			// 点击分享触发弹窗
			shareOn() {
				this.$appShare(``,`integral复制信息&${this.regcode}&/打开半价购APP购买：${this.userinfo.data.name}:商品编号#${this.userinfo.data.spu}`,'','')
				// this.$refs.sharepopup.open();
			},
			// 全价直接购买
			true_pay() {
				if(this.all_checked.length>0){
					if(this.guige.toString()==''){
						this.$refs.uToast.show({
							title: '请选择规格',
							type: 'error',
						})
						return
					}
				}
				// $u.route('/pages/truepay/truepay')
				let arr = this.guige.toString()
				if(this.all_checked.length>0){
					if(arr==''){
						this.$refs.uToast.show({
							title: '请选择规格',
							type: 'error',
						})
						return
					}
				}
				let str = this.data
				// if (arr == str.spece_value_id) {
					uni.setStorageSync('pay_massage', arr)
					this.$api.true_pays({
						buy_source: "buy_now",
						order_type: '1',
						sku_details: [{
							goods_item_id:this.all_checked.length<=0?this.data.id:str.id,
							num: this.value
						}],
						transport_type:2
					}, res => {
						if (res.data.code == 1) {
							uni.setStorageSync('pay_massage', res.data.data)
							uni.navigateTo({
								url: '/pages/truepay/truepay?num=1&order_type=1&buy_source=buy_now'
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.msg
							})
							if (res.data.code = 401) {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}
						}
					})
				// }
			},
			openLocation(){
				this.$com.openLocation(Number(this.shop.latitude),Number(this.shop.longitude))
			},
			// 点击收藏
			lickClick() {
				this.$api.good_lick({
					spu: this.data.spu
				}, res => {
					console.log(res);
					if (res.data.data.is_collect == 1) {
						this.licks = 1
					} else {
						this.licks = 0
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F5F5F5FF !important;


	}

	.one {
		background: url('https://www.sqkjkj.vip/wxImg/common/img/zz.jpg') no-repeat;
		background-size: 100% 100%;

		height: 883rpx;
		width: 750rpx;
		padding: 50rpx;
		box-sizing: border-box
	}

	@import url("@/css/shopmassage.css");
</style>
